<template>
	<view class="container">
		<map id="test_map" ref="map1" style="width: 100%; flex: 1;display: flex;align-items: right;"
			:show-location="true" :longitude="longitude" :latitude="latitude" :markers="markers" show-compass="true"
			scale="20" @tap="tapMap">
			<cover-image class="cover-view" style="position: absolute;right: 20px;bottom: 20px;"
				src="../../../static/myLocation.png" @click="getCurrentPosition"></cover-image>
		</map>
		<!-- 		<view style="height: 10%;"></view> -->
		<view class="search-container">
			<input v-model="searchQuery" placeholder="输入地址搜索" class="search-input" />
			<fui-icon name="search" style="font-size: 27px;padding: 2px;" @tap="search"></fui-icon>
		</view>
		<view class="addNewPoint">
			<view>没有找到对应点位？</view>
			<view @tap="addNewPoint()">去添加-></view>
		</view>
		<view class="pointList-view">
			<view v-for="(point,index) in pointList" class="point-view" :value="mapDetailDesc" @tap="checkPoint(index)">
				<view class="point-content">{{point.mapDetailDesc}}</view>
				<button class="point-add" type="primary" @tap="addPointToRoute(index)">添加</button>
			</view>
			<view style="color: gray;">没有更多数据了</view>
		</view>


	</view>
</template>

<script>
	import request from '../../../common/request';
	export default {
		data() {
			return {
				latitude: 0, // 纬度
				longitude: 0, // 经度
				markers: [], // 地图标记点
				searchQuery: '', // 搜索的地址
				showInput: false, // 控制输入框的显示
				pointName: '', // 点位名称
				tempPoint: null, // 临时保存的点位信息
				settingPoint: false, // 控制是否在设置点位模式中
				mapId: -1,
				pointList: [],
			};
		},

		onLoad(option) {
			this.mapId = option.mapId
			console.log("输出地图")
			console.log(this.mapId)
			this.getAllPoint()
		},
		onReady() {
			this.getCurrentLocation();
		},
		methods: {
			getCurrentLocation() {
				// 获取当前位置信息
				uni.getLocation({
					type: 'gcj02', // 使用国测局坐标系
					success: (res) => {
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.markers = [{
							id: 1,
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: '/static/locationpng.png', // 自定义标记图标
							width: 10,
							height: 10,
							label: {
								content: '当前位置',
								color: '#000',
								fontSize: 14,
								anchorX: -10,
								anchorY: -40,
							}
						}];
					},
					fail: (err) => {
						console.error('获取位置失败', err);
						uni.showToast({
							title: '获取位置失败',
							icon: 'none',
						});
					},
				});
			},
			search() {
				// 使用高德地图 API 进行地址搜索
				const key = '6a04c572238b1dc23aa7544e0aaa0d54'; // 高德地图API密钥
				uni.request({
					url: `https://restapi.amap.com/v3/geocode/geo?address=${this.searchQuery}&key=${key}`,
					success: (res) => {
						console.log('API响应:', res.data); // 打印API的完整响应数据
						if (res.data.geocodes && res.data.geocodes.length > 0) {
							const location = res.data.geocodes[0].location.split(',');
							this.longitude = parseFloat(location[0]);
							this.latitude = parseFloat(location[1]);
							this.markers = [{
								id: new Date().getTime(),
								latitude: this.latitude,
								longitude: this.longitude,
								iconPath: '/static/locationpng.png',
								width: 15,
								height: 15,
							}];
						} else {
							uni.showToast({
								title: '未找到该地址',
								icon: 'none',
							});
						}
					},
					fail: (err) => {
						console.error('搜索地址失败', err);
						uni.showToast({
							title: '搜索失败',
							icon: 'none',
						});
					},
				});
			},
			openPointInput() {
				uni.showToast({
					title: "请在地图上点击以确定点位",
					icon: 'none'
				})
				this.settingPoint = true;
				this.showInput = true;
			},
			savePoint() {
				if (this.pointName) {
					// 先删除临时标记
					this.markers = this.markers.filter(marker => marker.id !== this.tempPoint.id);

					// 创建带有名称的新标记
					const marker = {
						...this.tempPoint,
						label: {
							content: this.pointName,
							color: '#000',
							fontSize: 14,
							anchorX: -10,
							anchorY: -40,
						}
					};

					// 添加新标记到 markers 数组
					this.markers.push(marker);

					// 清空输入框和临时数据
					this.showInput = false;
					this.pointName = '';
					this.tempPoint = null;
					this.settingPoint = false; // 关闭设置点位模式
				} else {
					uni.showToast({
						title: '请输入点位名称',
						icon: 'none',
					});
				}
			},
			tapMap(event) {
				const mark = this.markers[0]
				if (this.settingPoint) {
					const {
						latitude,
						longitude
					} = event.detail;
					this.latitude = latitude;
					this.longitude = longitude;

					// 添加临时标记
					this.tempPoint = {
						id: new Date().getTime(),
						latitude: this.latitude,
						longitude: this.longitude,
						iconPath: '/static/locationpng.png',
						width: 15,
						height: 15,
					};
					this.markers = []
					this.markers.push(mark)
					this.markers.push(this.tempPoint);
				}
			},
			doDelete() {
				this.markers = [];
			},
			getCurrentPosition() {
				this.getCurrentLocation();
			},
			checkPoint(index) {
				//设置中心点，
				request(`/inspection/map/detail/${this.pointList[index].mapDetailId}`, 'GET').then(res => {
					console.log("获取特定点位信息")
					console.log(res.data.data)
					let marker = {
						id: new Date().getTime(),
						latitude: res.data.data.mapLatitude,
						longitude: res.data.data.mapLongitude,
						iconPath: '/static/locationpng.png',
						width: 15,
						height: 15,
					}
					this.markers.push(marker)
					this.latitude = res.data.data.mapLatitude
					this.longitude = res.data.data.mapLongitude
				})
			},
			getAllPoint() {
				request(`/inspection/map/${this.mapId}`, 'GET').then(res => {
					console.log("获取本地图所有点位")
					console.log(res)
					this.points = res.data.data
				})
				request(`/inspection/map/${1}`, 'GET').then(res => {
					console.log("获取总地图所有点位");
					console.log(res);
					if (!this.points) {
						// 如果 points 为空，直接将 pointList 赋值为总地图的点位
						this.pointList = res.data.data;
					} else {
						// 过滤数据
						this.pointList = res.data.data.filter(point => {
							return !this.points.find(listPoint => {
								return point.mapDetailDesc === listPoint.mapDetailDesc
							});
						});
					}
					console.log("pointList=")
					console.log(this.pointList)

				});

			},
			addPointToRoute(index) {
				uni.showModal({
					content: "是否添加该点位至地图" + this.pointList[index].mapDetailDesc,
					success: (res) => {
						if (res.confirm) {
							request(`/inspection/map/mapDetail`, 'POST', {
								"mapDetailDesc": this.pointList[index].mapDetailDesc,
								"mapId": this.mapId,
								"mapLatitude": this.pointList[index].mapLatitude,
								"mapLongitude": this.pointList[index].mapLongitude,
								"unitId": this.pointList[index].unitId,
								"mapNfcMsg": this.pointList[index].mapNfcMsg,
							}).then(res => {
								console.log("添加已有点位")
								console.log(res)
								uni.showToast({
									title: "添加点位成功",
									icon: 'none',
								})
								this.pointList.splice(index , 1)
							})
						}
					}
				})

			},
			addNewPoint() {
				console.log("新建点位")
				uni.navigateTo({
					url: `/pages/map/map?mapId=${this.mapId}`
				})
			}
		},
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.search-container {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		padding: 10px;
		background-color: #f8f9fa;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		height: 10%;
	}

	.search-input {
		flex: 1;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 8px;
		font-size: 16px;
		margin-right: 10px;
		transition: box-shadow 0.3s ease;
	}

	.search-input:focus {
		box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
		border-color: #007bff;
	}

	.search-button {
		padding: 10px 20px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.search-button:hover {
		background-color: #0056b3;
	}

	.action-button {
		padding: 10px 20px;
		background-color: #6c757d;
		color: white;
		border: none;
		border-radius: 8px;
		margin: 5px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.action-button:disabled {
		background-color: #c6c8ca;
		cursor: not-allowed;
	}

	.action-button:hover {
		background-color: #5a6268;
	}

	.cover-view {
		width: 35px;
		height: 35px;
		border-radius: 25px;
		background-color: rgba(255, 255, 255, 0.5);

	}

	.movable-area {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 240px;
		background-color: transparent;
	}

	.movable-view {
		width: 100%;
		background-color: transparent;
	}

	.point-view {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 40px;
		background-color: #fff;
		margin-bottom: 5px;
		padding: 20px;
		width: 85%;
		border-radius: 25px;
	}

	.point-content {
		font-size: 20px;
		width: 75%;
	}

	.point-add {
		justify-self: flex-end;
		align-self: flex-end;
		height: 40px;
		min-width: 70px;
	}

	.pointList-view {
		padding-left: 20px;
		overflow-y: auto;
		height: 40%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.addNewPoint {
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 20px;
	}
</style>